<template>
  <van-pull-refresh
    class="relative bg-white rounded-md shadow-md pb-12"
    v-model="refreshing"
    @refresh="onRefresh"
  >
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="border-t-4 border-gray-50"
    >
      <slot :all="all"></slot>
    </van-list>
  </van-pull-refresh>
</template>

<script>
export default {
  props: ['uri'],
  data() {
    return {
      all: [],
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
    }
  },
  created() {},
  methods: {
    open(row) {
      this.$refs.dialog.open(row)
    },
    onLoad() {
      if (this.refreshing) {
        this.all = []
        this.refreshing = false
        this.page = 1
      }
      const char = this.uri.includes('?') ? '&' : '?'
      this.axios.get(`${this.uri}${char}page=${this.page}`).then(res => {
        const { list, total } = res.data.data
        this.all = this.all.concat(list)
        this.loading = false

        if (this.all.length >= total) {
          this.finished = true
        }
        this.page++
      })
    },
    onRefresh() {
      this.all = []
      this.refreshing = true
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    remove(id) {
      this.all = this.all.filter(item => item.id !== id)
    },
  },
}
</script>

<style>
</style>